{% extends 'blog_base.html' %}
{% block title %} {{ title }} {% endblock %}

{% block stylesheet %}
{{ block.super }}
<style type="text/css">
ul.Horizontal {
    margin-left: 0px;
    padding-left: 0px;
}
ul.Horizontal li {
    display: inline;
}
</style>
{% endblock%}

{% block javascript %}
{{ block.super }}
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    $('#form').hide();
    $('#form_show_btn').click(function(){
        $('#form').toggle()
    });

});
//]]>
</script>
{% endblock%}

{% block content %}

{% load timezone_filters %}
<div class=clearfix>
    <div id=content>
        <article id=form>
            <form action="{% url blog_list %}" method="post">
            {{ form.as_p }}
            <input type="submit" value="Submit" />
            </form>
        </article>
        {% for blogpost in blogposts %}
        <article>
            <header>
                <div class=time>
                    <div class=year>{{ blogpost.timestamp }}</div>
                    <div class=date>{{ blogpost.timestamp }}<span>{{ blogpost.timestamp }}</span></div>
                </div>
                <h1>{{ blogpost.title }}</h1>
                <div class=comments>{{ blogpost.memorial }}</div>
            </header>
            <p>{{ blogpost.body }}</p>
            <footer>
                <em>Written by:</em> <strong>Author Name</strong>
                <span class=newLine><em>Tags:</em>
                {% for tag in blogpost.tags %}
                <a class=tags href=#>{{ tag }}</a>
                {% endfor %}
                <a class=button href=#>Continue Reading</a>
            </footer>
        </article>
        {% endfor %}
    </div>

    <aside>
        <section>
            <h1>About Me</h1>
            <ul class=Horizontal>
                <li><img alt="profile picture" height=100 src="http://a2.twimg.com/profile_images/751745929/tumblr_kz9h2w50cK1qapamqo1_1280.jpg"/></li>
                <li>I am Brenden Jeon. I live in Brisbane<button id =form_show_btn>show</button></li>
            </ul>
            <ul id=inTouch>
                <li><span class=twitter>12345</span> <a href="http://twitter.com/#!/angryjun">Twitter</a></li>
                <li><span class=rss>4321</span> <a href="http://www.facebook.com/profile.php?id=517734381">Facebook</a> </li>
            </ul>
        </section>

        <nav>
            <h1>Blogroll</h1>
            <ul class=links>
                <li><a href=#>A List of</a></li>
                <li><a href=#>Friendly Blogs</a></li>
                <li><a href=#>That have Exchanged</a></li>
                <li><a href=#>Links with Us</a></li>
            </ul>
        </nav>

        <section>
            <blockquote>It's as cunning as a fox that used to be the Professor of Cunning at Oxford University</blockquote>
            <a class=twitterHandle href=#>@TheBlackAdder</a>
        </section>
    </aside>
</div>
{% endblock %}